<template>
  <div>
    <u-tabs
      :list="list"
      @click="click"
      lineWidth="40"
      :current="activeIndex"
      lineColor="#ffb72f"
    />
    <div class="attribute-container">
      <component-attribute v-if="activeIndex === 0" />
      <page-attribute v-if="activeIndex === 1" />
    </div>
  </div>
</template>

<script>
import componentAttribute from "@/pages/index/components/editAttributeArea/components/componentAttribute";
import pageAttribute from "@/pages/index/components/editAttributeArea/components/pageAttribute";
export default {
  components: {
    componentAttribute,
    pageAttribute,
  },
  data() {
    return {
      list: [
        {
          name: "组件属性",
        },
        {
          name: "页面属性",
        },
      ],
      activeIndex: 1,
    };
  },
  methods: {
    click(item) {
      this.activeIndex = item.index;
      console.log("item", item);
    },
  },
};
</script>

<style scoped>
.attribute-container {
  height: 85vh;
  overflow: hidden;
  overflow-y: scroll;
  padding-bottom: 20px;
}
</style>
